<template>
  <view class="page">
    <Header :title="'开通课程'"></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <view
              class="tabs_item"
              :class="{ active: item.period === currentPeriod }"
              v-for="(item, index) in periodList"
              :key="index"
              @click="handleChangePeriod(item.period)"
            >
              <text>{{ item.name }}</text>
            </view>
          </view>
          <view class="box">
            <view class="list">
              <view
                class="item"
                v-for="(item, index) in bookList"
                :key="index"
                @click="handleSelectBook(item)"
              >
                <view class="item_detail">
                  <view class="item_title">
                    {{ item.bookEdition }}{{ item.bookYear }}
                  </view>
                  <view class="item_text"> {{ item.count }}词 </view>
                </view>
                <view class="item_img">
                  <image :src="item.bookImg" mode="widthFix" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getBooks, chooseBook } from "@/api/sync";
export default {
  components: {},
  data() {
    return {
      periodList: [
        {
          period: "1",
          name: "小学",
        },
        {
          period: "2",
          name: "初中",
        },
        {
          period: "3",
          name: "高中",
        },
      ],
      currentPeriod: "1",
      bookList: [],
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    getData() {
      getBooks(this.currentPeriod).then((res) => {
        this.bookList = res.data;
      });
    },
    handleChangePeriod(period) {
      if (period === this.currentPeriod) return;
      this.currentPeriod = period;
      this.getData();
    },
    handleSelectBook(item) {
      chooseBook(item.bookId).then(() => {
        uni.navigateBack();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./wordCourse";
</style>
